<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="/web/static/wxapp/mui.js"></script>
    <link href="/web/static/wxapp/mui.css" rel="stylesheet"/>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: #eeeeee;
    }
    .input-div{
        height: 50px;
        width: 95%;
        margin: 0 auto;
        background: #ffffff;
    }
    #phone{
        border: none;
        margin: 0;
        height: 48px;
        border-radius: 10px;
    }
    #send{
        margin-top: 7px;
        background: #e54a4e;
        border-color:#e54a4e;
        color: #fff;
        float: right;
        margin-right: 10px;
    }
</style>
<body>
    <img src="/web/static/in.png" style="width: 100%">
    <form id="form">
        <div class="input-div" style="border-radius: 10px 10px 0px 0px;margin-top: 20px;">
            <div style="width: 70%;float: left;height: 50px">
                <input type="tel" maxlength="11" id="phone" name="phone" placeholder="请输入手机号">
            </div>
            <div style="width: 30%;float: left;height: 50px;">
                <a id="send" href="javascript:sendmsg()" class="mui-btn"> 获取验证码</a>
            </div>
        </div>
        <div class="input-div" style="border-radius: 0px 0px 10px 10px">
            <input type="number" style="border: none;height: 48px;border-radius: 10px;" maxlength="11" id="code" name="code" placeholder="请输入验证码">
        </div>
    </form>
    <input type="button" onclick="register()" class="mui-btn" style="background: #e54a4e;border-color: #e54a4e; display: block; width: 95%;margin: 0 auto;line-height: 30px;margin-top: 20px;color: #fff" value="加入途骑">
    <p style="margin-top: 20px">
        　<input type="checkbox" checked onclick="this.checked='checked';">我已阅读并同意
        <span>
            <a href="/web/app/home/get_agreement">《用户注册协议》</a>
        </span>
    </p>
    <script src="/web/static/public/js/jquery.js"></script>
    <script>
        var time_size = 59;
        var invitation = '{:input("get.invitation")}';
        function sendmsg() {
            var phone = $("#phone").val();
            if(phone == ''){
                mui.toast('请输入手机号');
                return;
            }
            $.post('/nav/app/login/send_code',{'phone':phone},function (msg) {
                mui.toast(msg.msg);
                if(msg.state == 0){
                    return false;
                }
            })
            //数秒
            $("#send").removeAttr('href');
            $("#send").html('发送验证码('+time_size+')');
            minus();
        }
        function minus() {
            if(time_size < 0){
                $("#send").html("发送验证码");
                time_size = 59;
                $("#send").attr('href','javascript:sendmsg()');
            }else{
                setTimeout(function () {
                    $("#send").html('发送验证码('+time_size+')');
                    time_size--;
                    minus();
                },1000)
            }
        }
        function register() {
            var input = $("input");
            for(var i in input){
                if(input[i].placeholder != '' && input[i].value == ''){
                    mui.toast(input[i].placeholder);
                    return;
                }
            }
            var data = $("#form").serialize();
            $.ajax({
                url:'__URL__/?invitation='+invitation,
                data:data,
                type:'post',
                success:function(json){
                    mui.toast(json.msg);
                    if(json.state == 1){
                        setTimeout(function(){
                            //下载app
                            var u = navigator.userAgent;
                            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
                            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                            if(isAndroid){
                                //跳转安卓下载
                                var hasApp = true, t = 1000;
                                setTimeout(function () {  //没有安装APP则跳转至下载，延时时间设置为2秒
                                    if (!hasApp) window.location.href = '{$data.android}';
                                }, 2000);
                                var t1 = Date.now();
                                window.location.href = "jiujiashuma://host";
                                setTimeout(function () {    //t的时间就是出发APP启动的时间，若APP启动了，再次返回页面时t2这行代码执行，hasApp即为true。反之若APP没有启动即为false
                                    var t2 = Date.now();
                                    hasApp = !(!t1 || t2 - t1 < t + 150);
                                }, t);
                            }else if(isiOS){
                                //跳转苹果下载
                                location.href = '{$data.ios}';
                            }
                        },700)
                    }
                }
            })
        }
    </script>
</body>
</html>